<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title%></title>
</head>
<body>
    <h1><%= title%></h1>

     
    <% if(isLogined) { %>
    <% } else { %>

        <form name="loginForm" method="post" action="/login">
            name：<input type="text" id="name" name="name" value="" />
            value：<input type="password" id="password" name="password" value="" />
            <input type="submit" value="登陆" id="login">
        </form>

    <% } %>


    <script>

        const oForm = document.forms["loginForm"]; // 获取表单元素

        oForm.addEventListener('submit',(e)=>{
            e.preventDefault();

            const name = oForm["name"].value.trim(); // 获取用户名 .value 是谁的方法
            const password = oForm["password"].value.trim(); // 获取用户密码
            if(!name||!password) {

                alert('请输入用户名和密码');
                return ;
            }
            console.log('oForm',oForm);
            console.log('name',name);
            console.log('password',password);


            // 使用 ajax post 提交表单
            const xhr = new XMLHttpRequest();

            xhr.open('POST','/login'); // 前面的路径 http://localhost 会自动加上
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // var formData = new FormData(); // FormData 是 js 提供的，方便建立post表单请求数据的
            // formData.append(name,password);

            xhr.send(`name=${name}&password==${password}`);

            
        })
    </script>
</body>
</html>